import React, { useState ,useEffect} from 'react';
import './birthday.scss';
import { Button, InputComponent,Dropdown } from '../../../componet/index';
import axios from '../../../axios';
import { Table, TableColumnsType,TimePicker,Switch ,Spin} from 'antd';
import dayjs from 'dayjs';  //时间格式化
import type { TimePickerProps } from 'antd'; //时间格式化
interface DataType {
  _id: string;
  name: string;
  organization: string;
  intotime: string;
  Pushtime: string;
}


export default function Birthday() {
  // 获取数据
  const [inputValue, setInputValue] = useState<string>('');
  const [seletValue, setSelectValue] = useState<string>('');
  const [seletValue1, setSelectValue1] = useState<string>('');
  const [seletflag, setSelectflag] = useState(false);
  const [seletflag1, setSelectflag1] = useState(false);
  const [show, setShow] = useState<boolean>(true);
  const [show1, setShow1] = useState<boolean>(true);
  const [name, setName] = useState<string>('【姓名】');  // 姓名
  const [date, setDate] = useState<string>('【成为预备党员日期】');  // 入组织日期
  const [isLoading, setIsLoading] = useState(false);
  const [dataSource, setDataSource] = useState<DataType[]>([]);
  // 日期相同的数据(自动发送规则时使用)
  const [dataSource1, setDataSource1] = useState<DataType[]>([]);
  // 定义列的类型
  const columns: TableColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '组织',
      dataIndex: 'organization',
      key: 'organization',
      align: 'center',
    },
    {
      title: '入党日期',
      dataIndex: 'intotime',
      key: 'intotime',
      align: 'center',
    },
    {
      title: '推送时间',
      dataIndex: 'Pushtime',
      key: 'Pushtime',
      align: 'center',
    },
  ];

  interface DropdownOption {
    label: string;
    value: any;
  }
  interface DropdownOption {
    label: string;
    value: any;
  }
  const [options, setOptions]= useState<DropdownOption[]> ([])  // 下拉列表姓名
  const [options1, setOptions1]= useState<DropdownOption[]> ([]) // 下拉列表时间

    // 下拉列表姓名
    const handleDropdownChange = (value: any) => {
      // setSelectValue(value);
      setName(value)
      setSelectflag(false)
    };
    // 下拉列表时间
    const handleDropdownChange1 = (value: any) => {
      setSelectValue(value);
      setDate(value)
      setSelectflag1(false)
    };

    // 获取信息数据
    const Informationdata =async ()=>{
      // 当前日期
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const date = `${year}-${month}-${day}`;
      const response:any = await axios.get('/birthdayshow');
      // 过滤日期相同的数据
      const filteredData = response.list.filter((item: DataType) => item.intotime === date);
      setDataSource1(filteredData)
        // 将获取的数据转换为 DropdownOption 格式
        const formattedOptions: DropdownOption[] = filteredData.map((item: any) => ({
          label: item.name, // 或者其他适当的字段
          value: item.name,   // 或者其他适当的字段
      }));
        const formattedOptions1: DropdownOption[] = filteredData.map((item: any) => ({
          label: item.intotime, // 或者其他适当的字段
          value: item.intotime,   // 或者其他适当的字段
      }));
      setOptions(formattedOptions);
      setOptions1(formattedOptions1);

      
    }
    // 获取数据
  const fetchData = async () => { 
      // 发起请求获取数据
      const response:any = await axios.get('/birthdayshow');
      // 将返回的数据列表赋值给 allData
      const allData: DataType[] = response.list;
      // 初始化当前索引和每批加载的数据条数
      let currentIndex = 0; // 从第0项开始加载
      const batchSize = 2; // 每次加载2条数据
      // 定义加载数据的函数
      const loadBatch = () => {
        // 从 allData 中提取当前批次的数据（slice包括开始位不包括结束位）
        const newBatch = allData.slice(currentIndex, currentIndex + batchSize);
        setDataSource(prevData => {
          // 更新数据源，只添加当前没有在状态数据项中
          const updatedData = [
            ...prevData,
            // 过滤掉已经存在于 prevData 中的数据项
            ...newBatch.filter((item: DataType) => !prevData.some(existingItem => existingItem._id === item._id))
          ];
          return updatedData;
        });
        // 更新当前索引，准备加载下一批数据
        currentIndex += batchSize;
      };
      // 初始加载前2条数据
      loadBatch();
      setIsLoading(true); // 设置加载状态为 true，表示开始加载数据
      // 定义定时器，定期加载数据
      const interval = setInterval(() => {
        // 判断是否还有更多数据需要加载
        if (currentIndex < allData.length) {
          loadBatch(); // 加载下一批数据
        } else {
          clearInterval(interval); // 数据加载完毕后清除定时器
          setIsLoading(false); // 设置加载状态为 false，表示停止加载数据
        }
      }, 1000); // 每隔1秒加载一批数据
  };
  
  
  useEffect(() => {
    fetchData();
    Informationdata();
  }, []);
  
  
  
// 获取input框信息
  const handleInputChange = (value: string) => {
    setInputValue(value);
  };
  // 推送规则
  const handleButtonClick1 = () => {
    setShow1(!show1);
  };
  // 推送模版
  const handleButtonClick = () => {
      // 改变show状态
      setShow(!show);
  };
  // 查询
  const handleButtonClick3 = () => {
      // get请求birthdaysearch接口，将inputValue作为参数传递
      axios.get('/birthdaysearch',{params:{name:inputValue}}).then((response) => {
        setDataSource(response.data.list)
      })
  };
  // 重置
  const handleButtonClick4 = () => {
      // 清空inputValue
      setInputValue('');
    
  };
  // 插入姓名
  const handleButtonClick5 = () => {
    setSelectflag(true)
    setSelectflag1(false)
  };
  // 插入日期
  const handleButtonClick6 = () => {
    setSelectflag1(true)
    setSelectflag(false)
  };
  // 推送模板取消
  const handleButtonClick7 = () => {
      // 改变show状态
      setShow(!show);
      setDate('【成为预备党员日期】')
      setName('【姓名】')
  };
  // 推送模板确定
  const handleButtonClick8 = () => {
      // 改变show状态
      setShow(!show);
     const data={
        name:name,
        organization:'B区组织开发',
        intotime:date,
        Pushtime:date + ` 10:00:00`,
      }
      // 添加数据post请求接口
      axios.post('/birthdayadd',{data})
      fetchData()
      setDate('【成为预备党员日期】')
      setName('【姓名】')
  };
  // 推送规则取消
  const handleButtonClick9 = () => {
      // 改变show状态
      setShow1(!show1);
  };
  // 推送规则确定
  const handleButtonClick10 = () => {
      // 改变show状态
      setShow1(!show1);
  };
  // 推送规则X
  const handleButtonClick11 = () => {
      // 改变show状态
      setShow1(!show1);
  };
  // 是否启用推送规则
  const onChange0 = (checked: boolean) => {
    console.log(` ${checked}`,checked);
    // 当前时间
    const now = new Date();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const nowTime = `${hour}:${minute}`;
    if(checked&&nowTime=='10:00'){
      // 循环dataSource1数据进行添加
      for(let i=0;i<dataSource1.length;i++){
        // 添加数据
        const data={
          name:dataSource1[i].name,
          organization:dataSource1[i].organization,
          intotime:dataSource1[i].intotime,
          Pushtime:dataSource1[i].intotime + nowTime,
        }
        axios.post('/birthdayadd',{data})
      }
    }
    fetchData();
  };
  // 推送的时间
  const onChange1: TimePickerProps['onChange'] = (time, timeString) => {
    console.log(time, timeString);
  };

  return (
    <div className='birthday'>

      {show ? (
              <div className='birthdayOne'>
              <div className='birthday__title'>
                <Button text="推送规则" setColor='white' onClick={handleButtonClick1} />
                <Button text="推送模版" setColor='white' onClick={handleButtonClick} />
                &nbsp;&nbsp;
                姓名 &nbsp;
                <InputComponent
                  value={inputValue}
                  onChange={handleInputChange}
                  className="custom" 
                  placeholder="请输入搜索内容" 
                />
                <Button text="查询" setBackgroundColor='red' setColor='white' onClick={handleButtonClick3} />
                <Button text="重置" setBackgroundColor='white' onClick={handleButtonClick4} />
              </div>
              <div className='birthday__content'>
                <Table 
                  dataSource={dataSource} 
                  columns={columns} 
                  pagination={false} // 隐藏分页器
                />
              </div>
              {isLoading&&(
                 <Spin style={{marginLeft: '43%',marginTop: '20px',color:'red'}} size="large" />
              )}
            </div>
      ):(
        <div className='birthdayTwo'>
            {/* 标题 */}
            <h5 style={{borderBottom: '1px solid #ccc',paddingBottom: '10px',marginBottom: '25px'}}>
              <span style={{color: 'red',fontSize:'20px'}}> | </span>推送模版
            </h5>
             {/* 文案模版 */}
            <div style={{marginLeft: '35px'}}>
                <div style={{display: 'flex'}}>
                  <span style={{marginBottom:'90px'}}>*文案模版：</span>
                  <div style={{border: '1px solid #ccc',padding: '5px 10px 20px 10px',margin: '0 10px',width: '415px',display: 'inline-block'}}>
                    <span style={{ fontWeight: 700 }}>{name}</span>同志： <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今天是您的政治生日!  在<span style={{ fontWeight: 700 }}>{date}</span>，您光荣加入了中国共产党。在这神圣的日子里，向您致以节日的问候!希望您时刻牢记自己是一名共产党员，增强党员意识，不负党的重任，践行入党誓词，永葆共产党员的先进本色。
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;祝您身体健康，生活愉快!
                  </div>
                </div>
                <p style={{margin: '10px 10px 10px 95px',display: 'flex',width: '625px'}}>
                  <span style={{margin: '10px 0px'}}>单击插入字段：</span>
                  <Button text="姓名" setColor='red' setBackgroundColor='white' onClick={handleButtonClick5} />
                  {seletflag&&(
                    <Dropdown options={options} value={seletValue} onChange={handleDropdownChange}    placeholder="请选择姓名"/>
                  )}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <Button text="成为预备党日期" setColor='red' setBackgroundColor='white' onClick={handleButtonClick6} />
                  {seletflag1&&(
                    <Dropdown options={options1} value={seletValue1} onChange={handleDropdownChange1} placeholder="请选择日期"/>
                  )}
                </p>
            </div>
           {/* 海报图片 */}
            <div style={{marginLeft: '35px',display: 'flex'}}>
                  <span style={{marginBottom:'90px'}}>*海报模版：</span>
                  <div style={{padding: '5px 10px 20px 10px',margin: '0 10px',display: 'inline-block'}}>
                <div style={{position: 'relative'}}>
                <img src="/1.jpg" alt="示例图片" style={{width: '200px', height: '330px',position: 'relative'}}/>
                <span className='styledel'>x</span>
                </div>
              </div>

            </div>
          {/* 底部吸底 */}
            <div style={{  
                width: '83%',
                height: '50px',
                boxShadow: '0 -4px 8px rgba(0, 0, 0, 0.3)',
                paddingTop: '3px',
                position: 'fixed',
                bottom: '0',
                right:'2px',  
                textAlign: 'center',
                backgroundColor: 'white',
                }}>
                <Button text="取消" setColor='red' setBackgroundColor='white' onClick={handleButtonClick7} /> &nbsp;&nbsp; &nbsp;&nbsp;
                <Button text="确定" setColor='white' onClick={handleButtonClick8} />
            </div>
           </div>
      )}
    {
      !show1&&(
        <div className='guitan'>
          <div className='guitan1'>
            <p className='guitanp'>
              <h4>推送设置</h4>
              <span onClick={handleButtonClick11}>x</span>
            </p>
          <p className='guitanp1'>*是否启用 <Switch onChange={onChange0} /></p>
          <p className='guitanp1'>*推送时间 入党周年当天  &nbsp;
           
            <TimePicker onChange={onChange1} defaultValue={dayjs('10:00:00', 'HH:mm:ss')} />
          </p>
          <p className='guitanp2'>
          <Button text="取消" setColor='red' setBackgroundColor='white' onClick={handleButtonClick9} /> &nbsp;&nbsp; &nbsp;&nbsp;
          <Button text="确定" setColor='white' onClick={handleButtonClick10} />
          </p>
          </div>
        </div>
      )
    }
    </div>
  );
}


// ReturnType //返回类型
// Parameters //参数类型
// Pick<initstate,'username'> // 从initstate中取出username
// Omit  过滤
// extends 继承 
// as  别名
// interface  接口
// type  类型别名
// typeof